<template>
  <div class="container">
    <van-nav-bar>
      <template #left>
        <van-icon name="bars" color="#000000" @click="goDetail" />
      </template>
      <template #title>
        <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" @click="goSerarch">
          <template #eft-icon>
            <van-icon name="search" color="#000000" />
          </template>
        </van-search>
      </template>
      <template #right>
        <van-icon name="cart-o" color="#000000" class="right-icon" @click="goShopCar" />
      </template>
    </van-nav-bar>

    <!-- 标签页 -->

    <van-tabs v-model="active" @click="getTabText">
      <div v-if="TabShow" class="logings">
        <van-loading color="#1989fa" />
      </div>
      <div v-else>
        <van-tab
          v-for="data in tablist"
          :key="data.opt_id"
          :title="data.text"
          :name="data.path_name"
        >
          <van-grid :column-num="4" class="vanGrids">
            <van-grid-item v-for="value in tabDel.children" :key="value.opt_id">
              <van-image :src="value.image_url" />
              <div class="texts">{{value.opt_name}}</div>
            </van-grid-item>
          </van-grid>
        </van-tab>
      </div>
    </van-tabs>

    <!-- 商品列表页 -->
    <van-loading v-if="ListShow" color="#1989fa" />

    <van-grid v-else :column-num="2" :gutter="7">
      <van-grid-item v-for="value in dataDel" :key="value.goods_id"  @click="GoDetails(value.goods_id)">
        <van-image :src="value.hd_thumb_url" class="imgs" />
        <div class="dec">
          <div class="title">{{value.short_name}}</div>
          <div class="taps">
            <van-tag type="danger" v-for="item in value.tag_list" :key="item.tag_track_info" color="#FFE4E1" :text-color="item.text_color">{{item.text}}</van-tag>
          </div>
          <div class="prices">
            <van-tag type="danger" color="#FFFFFF" text-color="#FF0000" class="priceitem">￥{{value.price_info}}</van-tag>
            <van-tag type="danger" color="#FFFFFF" text-color="	#696969">{{value.sales_tip}}</van-tag>

          </div>
        </div>
      </van-grid-item>
    </van-grid>

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="//vueshop.glbuys.com/uploadfiles/1484285334.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="//vueshop.glbuys.com/uploadfiles/1484285302.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="//vueshop.glbuys.com/uploadfiles/1524206455.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="//vueshop.glbuys.com/uploadfiles/1484285334.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="//vueshop.glbuys.com/uploadfiles/1484285302.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="//vueshop.glbuys.com/uploadfiles/1524206455.jpg" alt />
        </div>
      </div>
    </div>
    <div class="nav">
      <dl>
        <dt>
          <img src="//vueshop.glbuys.com/uploadfiles/1484287695.png" alt />
        </dt>
        <dd>潮流女装</dd>
      </dl>
      <dl>
        <dt>
          <img src="//vueshop.glbuys.com/uploadfiles/1484287842.png" alt />
        </dt>
        <dd>品牌男装</dd>
      </dl>
      <dl>
        <dt>
          <img src="//vueshop.glbuys.com/uploadfiles/1484287985.png" alt />
        </dt>
        <dd>电脑办公</dd>
      </dl>
      <dl>
        <dt>
          <img src="//vueshop.glbuys.com/uploadfiles/1484288118.png" alt />
        </dt>
        <dd>手机数码</dd>
      </dl>
    </div>

    <div class="nv">
      <p>———潮流女装———</p>
    </div>

    <List />
  </div>
</template>




<script>
import List from "../../components/List";
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";

import http from "@/util/http";
import Vue from "vue";
import {
  NavBar,
  Icon,
  Search,
  Tab,
  Tabs,
  Grid,
  GridItem,
  Image,
  Tag,
  Loading
} from "vant";
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Image);
Vue.use(Tag);
Vue.use(Loading);


export default {
  data() {
    return {
      value: "",
      active: 2,
      tablist: [],
      tabDel: [],
      dataDel: [],
    };
  },
  components: {
    List,
  },
  mounted() {
    this.getDatalist();
    this.getTabText();
  },
  methods: {
    goDetail() {
      this.$router.push("list");
    },
    GoDetails(id){
      this.$router.push(`detail/${id}/shangpin`);
    },
    goSerarch() {
      this.$router.push("search");
    },
    goShopCar() {
      this.$router.push("shopcar");
    },
    getDatalist() {
      http.get("datalist").then((res) => {
        this.tablist = res.data.datalist;
        // console.log(res.data);
      });
    },
    getTabText(path) {
      // let _path = name;
      //  数据未请求到
      console.log(name, "1111", path, "11");
      let _this = this;
      if (path == undefined) {
        http.get("/baihuo").then((res) => {
          this.tabDel = res.data.children[0];
          // console.log(this.tabDel, res.data.children[0], "dl");
        });
        http.get("/baihuolist").then((res) => {
          this.dataDel = res.data.goods_list;
          console.log(this.dataDel, res.data, "dl");
          return Promise.resolve();
        });
      } else {
        http.get(`${path}`).then((res) => {
          this.tabDel = res.data.children[0];
          // console.log(this.tabDel, res.data.children[0], "dl");
        });
        http.get(`${path}list`).then((res) => {
          this.dataDel = res.data.goods_list;
          // console.log(this.dataDel, res.data,path, "dl");
          return Promise.resolve();
        });
      }
    },
  },
  computed: {
    TabShow() {
      if (!this.tablist) {
        return true;
      } else {
        return false;
      }
    },
    ListShow() {
      if (!this.dataDel) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;
  .right-icon {
    font-size: 2.5rem;
  }
  .texts {
    font-size: 1rem;
  }
  .vanGrids {
    background: white;
  }
  .dec {
    text-align: left;
    width: 15rem;
    white-space: nowrap;
    overflow: hidden;
  }
  .title {
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.4rem;
  }
  .title,
  .taps,
  .dec {
    margin: 2px 0;
  }
  .imgs {
    width: 15rem;
  }
  .taps{
    // display: flex;
    white-space: break-spaces;
  }
  .priceitem{
    font-size: 1.6rem;
    font-family: ui-monospace
  }
}

.logings {
  width: 100%;
  height: 200%;
  text-align: center;
}

.swiper-container img {
  width: 100%;
}

.nav {
  display: flex;
  justify-content: space-around;
  margin: 1rem 0 0;
  padding: 0.5rem 0 0;
  box-sizing: border-box;
  height: 8rem;
  background-color: #fff;
  width: 100%;
  font-size: 1.4rem;
  text-align: center;
  color: #999;
  img {
    width: 4rem;
    height: 4rem;
  }
  dd {
    margin: 0.5rem 0 0;
  }
}

.nv {
  width: 100%;
  color: #f73b61;
  background-color: #fff;
  height: 3.3rem;
  margin-top: 1.5rem;
  text-align: center;
  line-height: 3.3rem;
}
</style>

